<template>
  <div id="Similar" class="modelBox">
    <h2 class="title">
      <a href="javascript:void(0)" @click="messageExpect">
        <img src="../../../static/m_img/h_ks.png" alt>
        <span>找相似车源</span>
      </a>
    </h2>
    <div class="similarCon">
      <Row class="Row" :gutter="10">
        <Col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <a href="javascript:void(0)" @click="messageExpect" class="tjw">
            <img src="../../../static/m_img/x_tjw.png" alt>
            同价位
          </a>
        </Col>
        <Col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <a href="javascript:void(0)" @click="messageExpect" class="tpp">
            <img src="../../../static/m_img/x_tpp.png" alt>
            同品牌
          </a>
        </Col>
        <Col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <a href="javascript:void(0)" @click="messageExpect" class="tlx">
            <img src="../../../static/m_img/x_tlx.png" alt>
            同类型
          </a>
        </Col>
      </Row>
    </div>
    <v-messageExpect :isvisibleadd.sync="addinfoshow" v-on:listenToChildEvent="showmsgformchild"></v-messageExpect>
  </div>
</template>
<script>
import { Row, Col } from "element-ui";
import vMessageExpect from "../common/messageExpect";
export default {
  data() {
    return {
      addinfoshow: false
    };
  },
  components: {
    Row,
    Col,
    vMessageExpect
  },
  methods: {
    messageExpect() {
      this.addinfoshow = true;
    },
    showmsgformchild: function(data) {
      this.addinfoshow = data;
    }
  }
};
</script>

<style lang="scss">
#Similar {
  .similarCon {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .Row {
      width: 100%;
    }
    a {
      width: 100%;
      height: 68px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 1.666667rem;
      border-radius: 4px;
      img {
        margin-right: 2px;
      }
    }
    .tjw {
      background: url(../../../static/m_img/x_t1.png) center no-repeat;
      background-size: cover;
      img {
        width: 25px;
        height: 21px;
      }
    }
    .tpp {
      background: url(../../../static/m_img/x_t2.png) center no-repeat;
      background-size: cover;
      img {
        width: 21px;
        height: 25px;
      }
    }
    .tlx {
      background: url(../../../static/m_img/x_t3.png) center no-repeat;
      background-size: cover;
      img {
        width: 24px;
        height: 24px;
      }
    }
  }
}
</style>
